import {
  ANIMATION,
  BADGE_POSITION,
  DEFAULT_BADGE_PROPS,
  THEME_COLORS,
} from './types'

/**
 * 获取徽章样式
 */
export function styles(className: string) {
  return `
  .${className} {
    display: inline-block;
    --badge-theme-color: ${DEFAULT_BADGE_PROPS.theme ? THEME_COLORS[DEFAULT_BADGE_PROPS.theme] : THEME_COLORS.orange};
    --badge-type: ${DEFAULT_BADGE_PROPS.type};
    --badge-ripple: ${DEFAULT_BADGE_PROPS.ripple ? ANIMATION : 'none'};
    --badge-ripple-color-start: ${DEFAULT_BADGE_PROPS.theme ? THEME_COLORS[DEFAULT_BADGE_PROPS.theme] : THEME_COLORS.orange}80;
    --badge-ripple-color-end: ${DEFAULT_BADGE_PROPS.theme ? THEME_COLORS[DEFAULT_BADGE_PROPS.theme] : THEME_COLORS.orange}00;
    position: unset !important;
  }
  
  .badge-content {
    box-sizing: border-box;
    position: absolute !important;
    background-color: var(--badge-theme-color);
    animation: var(--badge-ripple);
    z-index: 10;
  }
  
  ${generatePositionStyles()}

  ${generateTypeStyles()}
`
}

/**
 * 生成所有位置样式类
 */
function generatePositionStyles() {
  return Object.values(BADGE_POSITION).map(position => `
    .badge-content[data-position="${position.key}"] {
      ${position.style}
    }
  `).join('\n')
}

/**
 * 生成类型样式
 * @returns {string} 类型样式字符串
 */
function generateTypeStyles(): string {
  return `
    .badge-content[data-type="rim"] {
      min-width: 20px;
      height: 18px;
      padding: 0 6px;
      border-radius: 10px;
      font-size: 12px;
      line-height: 18px;
      white-space: nowrap;
      text-align: center;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .badge-content[data-type="dot"] {
      width: 8px !important;
      height: 8px !important;
      border-radius: 50%;
    }
  `
}
